#header{
        position: sticky;
        background-color: transparent;
        padding: 10px 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
    .logo{
        font-family: OSBold;
        text-transform: uppercase;
    }
}
.navbar-inverse{
    background-color: transparent;
    border-color: transparent;
}
.navbar-inverse .navbar-brand{
    color: #fff;
}
#bs-example-navbar-collapse-1{
    a{
        font-family: OSBold;
        text-transform: uppercase;
        font-weight: bold;
        border-bottom: 2px solid transparent;
        color: #fff;
        &:hover{
            border-bottom: 2px solid #fcac45;
        }  
    }
}
@media screen and(max-width:768px){
    .nav{
        text-align: center;
        a{
            color: #fff;
        }
    }   
}
#banner{
    .content{
    text-align: center;
    margin-top: 20rem;
    margin-bottom: 30rem;
    color: #999;
        .title{
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 5rem;
        span{
            font-family: OSBold;
            font-weight: bold;
            color: #fcac45;
        }
    }
    p{
        font-size: 2.5rem;
        font-family: OSLight;
        span{
            font-family: OSBold;
            font-weight: bold;
        }
    }
}
}
@media screen and(max-width:500px){
    #banner{
        .content{
            .title{
            font-size: 3rem;
            }
            p{
                font-size: 1.5rem;
            }
        }
        .bottom{
            width: 30px;
            height: 30px;
            line-height: 25px;
        }
    }
    
}
.bottom{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 2px solid #fff;
    border-radius: 50%;
    margin-top: 14rem;
    text-align: center;
    line-height: 50px;
    transition:all 0.1s linear;
    img{
        width: 50%;
        height: 50%;
    }
    &:hover{
        transform: translateY(-3rem);
        box-shadow: 0px 0px 10px 1px white;
    }
}
#about{
    display: flex;
    justify-content: space-between;
    .about-left{
        width: 50%;
        margin-top: 10rem;
    }
    .about-right{
        width: 50%;
        margin-top: 9rem;
        h3{
            text-transform: uppercase;
            font-size: 2rem;
            color: #636363;
        }
        .about-right-p1{
            color: #222222;
            font-size: 3rem;
            text-transform: uppercase;
            font-family: OSLight;
            font-weight: bold;
            span:first-child{
                border-bottom: 3px solid rgb(255, 175, 3);
            }
            span:last-child{
                font-family: OSBold;
                font-weight: bold;
            }
        }
        .about-right-p2{
            color: #6c6c6c;
            font-size: 1.5rem;
            margin: 2rem 0;
        }
        .about-right-p3{
            color: #6c6c6c;
            font-size: 1.5rem;
            li{
                width: 100%;
                height: 4rem;
                display: flex;
                align-items: center;
                span{
                    font-family: OSBold;
                    font-weight: bold;
                    text-indent: 1rem;
                }
            }
        }
        .about-right-p4{
            width: 16rem;
            height: 4rem;
            border: 1px solid #6c6c6c;
            color: #6c6c6c;
            font-size: 0.3rem;
            text-transform: uppercase;
            border-radius: 5%;
            margin-top:4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .about-right-p4-img{
                margin-right: 0.5rem;
            }
            &:hover{
                box-shadow: 0 5px 10px 1px #666;
            }
        }
    }
}
@media screen and(max-width:500px){
    #about{
        .about-left{
            display: none;
        }
        .about-right{
            width: 100%;
            margin-top: 15rem;
            h3{
                font-size: 1.5rem;
            }
            .about-right-p1{
                font-size: 2rem;
                display: flex;
                align-items: center;
            }
            span:first-child{
                margin-right: 1rem;
            }
            span:last-child{
                margin-left: 1rem;
            }
            .about-right-p3{
                li{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    span{
                        text-indent: 0rem;
                    }
                }
            }
            .about-right-p4{
                margin-top: 3rem;
                font-size: 1rem;
            }
        }
    }
}
@media screen and(max-width:990px){
    .about-left{
        display: none;
    }
    .abou-right{
        width: 100%;
    }
}
#services{
    background-color: #000;
    margin-top: 7rem;
    .title{
        text-transform: uppercase;
        font-size: 5rem;
        text-align: center;
        color: #fff;
        margin-top: 7rem;
        span{
            font-family: OSLight;
        }
        img{
            padding-bottom: 3rem;
        }
    }
    .overall{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .item{
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .img{
                width: 20rem;
                height: 20rem;
                img{
                    width: 100%;
                    border-radius: 50%;
                    transition: all 0.3s linear;
                    &:hover{
                        transform: rotate(360deg);
                    }
                }
            }
            .middle{
                margin-top: 2rem;
                text-align: center;
                .name{
                    font-size: 2rem;
                    font-family: OSBold;
                    color: #fff;
                }
                .nie{
                    font-size: 1.5rem;
                    font-family: OSLight;
                    color: #ccc;
                }
            }
            .text{
                margin-top: 2rem;
                font-size: 1rem;
                color: #fff;
            }
        }
    }
    .gdt{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 8rem 0;
        span{
            display: block;
            width: 1rem;
            height: 1rem;
            background-color: #fff;
            margin-left: 1rem;
            cursor: pointer;
            &:hover{
                background-color: #fcac45;
            }
        }
    }
}
@media screen and(max-width:990px){
    #services{
        .title{
            font-size: 3rem;
    }
    .overall{
        .item{
            .img{
                width: 12rem;
                height: 12rem;
            }
            .middle{
                margin-top: 1rem;
                .name{
                    font-size: 1.5rem;
                }
                .nie{
                    font-size: 1rem;
                }
            }
            .text{
                font-size: 0.5rem;
            }
        }
    }
    .gdt{
        margin: 6rem 0;
        span{
            width: 0.8rem;
            height: 0.8rem;
            margin-left: 0.8rem;
        }
    }
    }
}
@media screen and(max-width:500px){
    #services{
        .title{
            font-size: 3rem;
            img{
                transform: scale(0.5);
            }
        }
        .overall{
            flex-wrap: wrap;
            margin-bottom: 4rem;
            .item{
                width: 90%;
                margin-bottom: 2rem;
                flex-direction: row;
                .img{
                    width: 8rem;
                    height: 8rem;
                    margin-right: 2rem;
                }
                .yd{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 70%;
                    .middle{
                        text-align: left;
                    .name{
                        font-size: 1.5rem;
                    }
                    .nie{
                        font-size: 1rem;
                    }
                }
                .text{
                    font-size: 1rem;
                    margin-top: 0.5rem;
                }
                }
            }
        }
        .gdt{
            display: none;
        }
    }

}
#portfolio{
    .title{
        margin-top: 5rem;
        .tit{
            font-size: 4rem;
            text-transform: uppercase;
            color: #000;
            font-family: OSLight;
            text-align: center;
            span{
                font-family: OSBold;
                font-weight: bold;
            }
        }
        .bg{
            text-align: center;
            margin-top: 1rem;
        }
        .title-text{
            width: 90%;
            text-align: center;
            font-size: 1rem;
            margin: 3rem auto;
        }
    }
    .overall{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 12rem 0 5rem 0;
        .item{
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .img{
                width: 12rem;
                height: 12rem;
                border: 0.5rem solid #fcac45;
                border-radius: 50%;
                text-align: center;
                line-height: 11rem;
            }
            .yd{
                .middle{
                    text-align: center;
                    .name{
                        font-size: 2rem;
                        text-transform: uppercase;
                        font-family: OSBold;
                        margin-top: 2rem;
                    }
                    .text{
                        font-size: 1rem;
                        margin-top: 0.5rem;
                    }
                }
            }
        }
    }
    
}
@media screen and(max-width:990px){
    #portfolio{
        .title{
        .tit{
            font-size: 3rem;
        }
        .bg{
            margin-top: 0.8rem;
        }
        .title-text{
            font-size: 0.8rem;
        }
    }
        .overall{
            margin: 8rem 0 3rem 0;
            .item{
                .img{
                    width: 9rem;
                    height: 9rem;
                    border: 0.3rem solid #fcac45;
                    line-height: 8rem;
                    img{
                        transform: scale(0.7);
                    }
                }
                .yd{
                    .middle{
                        .name{
                            font-size: 1.8rem;
                        }
                        .text{
                            font-size: 0.5rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
        }
    }
}
@media screen and(max-width:500px){
    #portfolio{
        .title{
            .tit{
                font-size: 2.3rem;
                margin-top: 0;
            }
            .bg{
                img{
                    transform: scale(0.5);
                }
            }
            .title-text{
                font-size: 0.8em;
                margin: 1rem auto;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
            }
        }
        .overall{
            flex-wrap: wrap;
            margin: 1rem 0 3rem 0;
            .item{
                width: 90%;
                flex-direction: row;
                align-items: center;
                margin-top: 1rem;
                .img{
                    width: 6rem;
                    height: 6rem;
                    line-height: 5rem;
                    margin-right: 1.5rem;
                    img{
                        transform: scale(0.5);
                    }
                }
                .yd{
                    width: 70%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .middle{
                        text-align: left;
                        .name{
                            font-size: 1.3rem;
                            margin-top: 0;
                        }
                        .text{
                            font-size: 0.8rem;
                        }
                    }
                }
            }
        }
        
    }
}
#clients{
    background-color: #000;
    .title{
        font-size: 4rem;
        text-align: center;
        margin-top: 6rem;
        color: #fff;
        font-family: OSLight;
        span{
            font-family: OSBold;
        }
    }
    .img{
        text-align: center;
        margin-top: 7rem;
    }
    .gdt{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10rem 0;
        span{
            display: block;
            width: 1rem;
            height: 1rem;
            background-color: #fff;
            margin-right: 1rem;
            cursor: pointer;
            &:hover{
                background-color: #fcac45;
            }
        }
    }
}
@media screen and(max-width:990px){
    #clients{
        .title{
            margin-top: 5rem;
            font-size: 3rem;
            .bg{
                transform: scale(0.7);
            }
        }
        .img{
            transform: scale(0.7);
        }
        .gdt{
            margin: 7rem 0;
            span{
                width: 0.8rem;
                height: 0.8rem;
                margin-right: 0.8rem;  
            }
            
        }
    }
}
@media screen and(max-width:500px){
    #clients{
        .title{
            margin-top: 4rem;
            font-size: 2.5rem;
            .bg{
                transform: scale(0.5);
            }
        }
        .img{
            margin: 4rem 0 7rem 0;
        }
        .gdt{
            display: none;
        }
        
    }
}
#testimonials{
    margin-bottom: 10rem;
    .title{
        font-size: 4rem;
        color: #000;
        text-align: center;
        margin-top: 6rem;
        text-transform: uppercase;
        font-family: OSLight;
        span{
            font-family: OSBold;
            font-weight: bold;
        }
    }
    .title-text{
        font-size: 1.3rem;
        text-align: center;
        margin: 3rem 0;
    }
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 9rem 0 4rem 0;
        .left{
            text-transform: uppercase;
            font-family: OSBold;
        }
        .right{
            font-s
            span{
                font-family: OSBold;
            }
        }
    }
    .overall{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        .item{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .img{
                width: 100%;
            }
            .text{
                // width: 264px;
                // height: 239px;
                width: 100%;
                height: 100%;
                background-color: #000;
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                transition:all 0.5s linear;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .name{
                    font-size: 2rem;
                    font-family: OSBold;
                    color: #fff;
                    text-transform: uppercase;
                }
                .p1{
                    font-size: 1.5rem;
                    color: #ccc;
                    margin-bottom: 4rem;
                }
                .btnn{
                    font-size: 20px;
                    width: 40px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    border-radius: 50%;
                    border:1px solid #fcac45;
                    color: #fcac45;
                    }
                }
            &:hover .text{
                opacity: 1;
            }
        }
        
    }
}
@media screen and(max-width:990px){
    #testimonials{
        margin-bottom: 4rem;
        .title{
            font-size: 3rem;
            margin-top: 4rem;
            .bg{
                img{
                    transform: scale(0.7);
                }
            }
        }
        .title-text{
            font-size: 1.5rem;
            margin: 3rem 0;
        }
        .header{
            display: none;
        }
        .overall{
            flex-wrap: wrap;
            margin-bottom: 0;
            justify-content: space-around;
            margin-top: 2rem;
            .item{
                width: 40%;
                margin-bottom: 2rem;
                .img{
                    width: 100%;
                }
                .text{
                    width: 91%;
                    .name{
                        font-size: 2rem;
                    }
                    .p1{
                        font-size: 1.5rem;
                        margin-bottom: 4rem;
                    }
                    .btnn{
                        width: 40px;
                        height: 40px;
                        font-size: 20px;
                        line-height: 40px;
                    }
                }
            }
        }
    }
}
@media screen and(max-width:500px){
    #testimonials{
        margin-bottom: 3rem;
        .title{
            font-size: 2.3rem;
            margin-top: 4rem;
            .bg{
                img{
                    transform: scale(0.5);
                }
            }
        }
        .title-text{
            font-size: 1rem;
            margin: 2rem 0;
            overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
        }
        .header{
            display: none;
        }
        .overall{
            flex-wrap: wrap;
            margin-bottom: 0;
            justify-content: space-around;
            .item{
                width: 40%;
                margin-bottom: 2rem;
                .text{
                    .name{
                        font-size: 1.2rem;
                    }
                    .p1{
                        font-size: 1rem;
                        margin-bottom: 2rem;
                    }
                    .btnn{
                        width: 20px;
                        height: 20px;
                        font-size: 10px;
                        line-height: 20px;
                    }
                }
            }
        }
    }
}
#cl2{
    background-color: #000;
    .title{
        font-size: 4rem;
        text-align: center;
        margin-top: 6rem;
        color: #fff;
        font-family: OSLight;
        text-transform: uppercase;
        span{
            font-family: OSBold;
        }
    }
    .img{
        text-align: center;
        margin-top: 7rem;
        font-size: 2rem;
        color: #fff;
        .img-text{
            // color: #ccc;
            // font-size: 2rem;
            // margin: 4rem 0;
            display: none;
        }
    }
    .gdt{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10rem 0;
        span{
            display: block;
            width: 1rem;
            height: 1rem;
            background-color: #fff;
            margin-right: 1rem;
            cursor: pointer;
            &:hover{
                background-color: #fcac45;
            }
        }
    }
}
@media screen and(max-width:500px){
    #cl2{
        .title{
            font-size: 2.3rem;
            margin-top: 3rem;
            .bg{
                img{
                    transform: scale(0.5);
                }
            }
        }
        .img{
            font-size: 0.8rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            margin:3rem 0 11rem 0;
            .img-text{
                font-size: 0.5rem;
                margin: 1rem 0;
                color: #fff;
            }
        }
        .gdt{
            display: none;
        }
    }
}
#contact{
    .title{
        text-transform: uppercase;
        font-size: 4rem;
        font-family: OSLight;
        margin: 8rem 0 4rem 0;
        text-align: center;
        span{
            font-family: OSBold;
            font-weight: bold;
        }
    }
    .title-text{
        width: 70%;
        margin: 0 auto;
        div{
            text-align: center;
        }
    }
    .bd{
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 5rem auto;
        .t1{
            display: flex;
            align-items: center;
            .name{
                font-size: 1.5rem;
                display: flex;
                flex-direction: column;
                margin:0 30px;
                .sp1{
                    color: #666;
                    span{
                        color: red;
                    }
                }
                input{
                    width: 300px;
                    height: 40px;
                }
            }
        }
        .t2{
            margin: 3rem 0;
            .sp1{
                color: #666;
                span{
                    color: red;
                }
            }
            input{
                width: 660px;
                height: 200px;
            }
        }
        .t3{
            margin-left: 580px;
            .btn{
                width: 80px;
                color: #fff;
                background-color: #fcac45;
                font-family: OSBold;
            }
        }
    }
}
@media screen and(max-width:500px){
    #contact{
        .title{
            font-size: 2.3rem;
            margin: 4rem 0 1rem 0;
            img{
                transform: scale(0.5);
            }
        }
        .title-text{
            font-size: 1.5rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
        }
        .bd{
            margin: 3rem auto;
            .t1{
                flex-direction: column;
                .name{
                    font-size: 1rem;
                    input{
                        width: 240px;
                        height: 30px;
                    }
                }
            }
            .t2{
                margin: 2rem 0;
                .sp1{
                    font-size: 1rem;
                }
                input{
                    width: 240px;
                    height: 80px;
                }
            }
            .t3{
                margin: 0 auto;
                .btn{
                    width: 60px;
                    height: 30px;
                    font-size: 1rem;
                }
            }
        }
    }
}
#footer{
    background-color: #222222;
    .overall{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 4rem 0;
        .left{
            font-size: 1rem;
            color: #ccc;
        }
        .right{
            display: flex;
            div{
                margin-left: 0,5rem;
            }
        }
    }
}
@media screen and(max-width:500px){
    #footer{
        .overall{
            margin: 2rem 0;
            flex-direction: column-reverse;
            justify-content: space-around;
        }
        .left{
            font-size: 0.1rem;
            margin-top: 1rem;
        }
        .right{
            margin-top: 2rem;
            div{
                margin-left: 2rem;
                img{
                    max-width: 70%;
                }
            }
        }
    }
}
#back{
    width: 10rem;
    height: 10rem;
    position: fixed;
    right: 0;
    top: 50%;
    transition: all 0.3s linear;
    #gotop{
        img{
            width: 100%;
        }
    }
    &:hover{
        top: 45%;
    }
}
@media screen and(max-width:500px){
    #back{
        width: 4rem;
        height: 4rem;
    }
}